<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QnBt 宝塔主机面板 - 现代化的虚拟主机管理平台</title>
    <meta name="description" content="QnBt 是一个基于宝塔控制面板 API 二次开发的现代化虚拟主机管理系统，提供简洁高效的虚拟主机管理解决方案。">
    <meta name="keywords" content="宝塔面板, 虚拟主机, 主机管理, QnBt, 服务器管理">
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <style>
        :root {
            --primary-color: #0d6efd;
            --secondary-color: #6c757d;
            --accent-color: #20c997;
            --light-bg: #f8f9fa;
            --dark-bg: #212529;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .hero-section {
            background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
            color: white;
            padding: 100px 0;
            margin-bottom: 60px;
        }
        
        .hero-section h1 {
            font-weight: 700;
            font-size: 3.5rem;
            margin-bottom: 20px;
        }
        
        .hero-section p {
            font-size: 1.25rem;
            opacity: 0.9;
            margin-bottom: 30px;
        }
        
        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
            border: none;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .section-title {
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 40px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 10px 25px;
            font-weight: 600;
        }
        
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0b5ed7;
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .screenshot {
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            margin-bottom: 30px;
        }
        
        .footer {
            background-color: var(--dark-bg);
            color: white;
            padding: 50px 0 20px;
        }
        
        .footer a {
            color: #adb5bd;
            text-decoration: none;
        }
        
        .footer a:hover {
            color: white;
        }
        
        .social-icon {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.1);
            margin-right: 10px;
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            background-color: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .copyright {
            padding-top: 20px;
            margin-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-server me-2" viewBox="0 0 16 16">
                    <path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z"/>
                    <path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334c0 1.473-2.985 2.667-6.667 2.667S1.333 7.807 1.333 6.334z"/>
                    <path d="M1.333 10v3c0 1.473 2.985 2.667 6.667 2.667s6.667-1.194 6.667-2.667v-3c0 1.473-2.985 2.667-6.667 2.667S1.333 11.473 1.333 10z"/>
                </svg>
                QnBt
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">功能特性</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#screenshot">界面预览</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#download">下载</a>
                    </li>
                
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:void(0)" onclick="showQQGroup()">QQ群</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h1>现代化的宝塔虚拟主机管理面板</h1>
                    <p class="lead">QnBt 是一个基于宝塔控制面板 API 二次开发的虚拟主机管理系统，使用python开发，提供简洁高效的虚拟主机管理解决方案。</p>
                    <div class="d-flex gap-3">
                        <a href="#download" class="btn btn-light btn-lg">立即下载</a>
                        <a href="#features" class="btn btn-outline-light btn-lg">了解更多</a>
                    </div>
                </div>
                <div class="col-lg-6 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" fill="currentColor" class="bi bi-window" viewBox="0 0 16 16">
                        <path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                        <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1H2z"/>
                    </svg>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特性 -->
    <section id="features" class="py-5">
        <div class="container">
            <h2 class="text-center section-title">核心功能</h2>
            <p class="text-center text-muted mb-5">QnBt 提供全面的虚拟主机管理功能，让您的服务器管理变得简单高效</p>
            
            <div class="row">
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-hdd-network" viewBox="0 0 16 16">
                                <path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm2 7a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2.5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                                <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2z"/>
                            </svg>
                        </div>
                        <h4>虚拟主机管理</h4>
                        <p class="text-muted">支持虚拟主机的创建、配置、启停、删除等全生命周期管理</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
                                <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7a1 1 0 0 0 1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
                            </svg>
                        </div>
                        <h4>文件管理</h4>
                        <p class="text-muted">集成强大的文件管理器，支持在线编辑、上传下载</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-database" viewBox="0 0 16 16">
                                <path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.271-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313ZM13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.271-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.138.543.264.804.375.467.2 1.063.35 1.692.439 1.228.175 2.632.223 4.008.13 1.376.093 2.78-.055 4.008-.13.63-.088 1.225-.238 1.692-.439.26-.111.533-.237.804-.375ZM13 10.698V12c0 .374-.356.875-1.318 1.313C10.766 13.729 9.464 14 8 14s-2.766-.271-3.682-.687C3.356 12.875 3 12.373 3 12v-1.302c.271.138.543.264.804.375.467.2 1.063.35 1.692.439 1.228.175 2.632.223 4.008.13 1.376.093 2.78-.055 4.008-.13.63-.088 1.225-.238 1.692-.439.26-.111.533-.237.804-.375Z"/>
                            </svg>
                        </div>
                        <h4>数据库管理</h4>
                        <p class="text-muted">便捷的数据库创建、配置和管理功能</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
                                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
                            </svg>
                        </div>
                        <h4>安全管理</h4>
                        <p class="text-muted">完善的权限管理和安全控制机制</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
                                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.267 9.267 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
                            </svg>
                        </div>
                        <h4>SSL证书</h4>
                        <p class="text-muted">SSL证书的申请与配置，保障网站安全</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="card feature-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
                                <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
                            </svg>
                        </div>
                        <h4>流量统计</h4>
                        <p class="text-muted">虚拟主机的流量监控与统计功能</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 界面预览 -->
    <section id="screenshot" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title">界面预览</h2>
            <p class="text-center text-muted mb-5">现代化的用户界面设计，操作简单直观</p>
            
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="text-center">
                        <img src="https://wmimg.com/i/113/2025/09/68b91dd2f2d3d.png" alt="QnBt 管理面板界面展示" class="img-fluid rounded shadow" style="max-width: 100%; height: auto;">
                        <p class="mt-3 text-muted">QnBt 管理面板界面展示</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 下载 -->
    <section id="download" class="py-5">
        <div class="container">
            <h2 class="text-center section-title">立即开始</h2>
            <p class="text-center text-muted mb-5">获取 QnBt 并开始您的虚拟主机管理之旅</p>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body text-center p-5">
                            <h3 class="mb-4">获取源代码</h3>
                            <p class="mb-4">QnBt 完全开源，您可以从 Gitee 获取最新源代码</p>
                            <a href="https://gitee.com/zhuxiaohuaqn/qnbt" target="_blank" class="btn btn-primary btn-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-download me-2" viewBox="0 0 16 16">
                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                </svg>
                                从 Gitee 下载
                            </a>
                            <div class="mt-4">
                                <p class="mb-1">或者通过 Git 克隆：</p>
                                <div class="bg-dark text-white p-3 rounded">
                                    git clone https://gitee.com/zhuxiaohuaqn/qnbt.git
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title">联系我们</h2>
            <p class="text-center text-muted mb-5">有任何问题或建议？欢迎与我们联系</p>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-body p-5">
                            <div class="row text-center">
                                <div class="col-md-3 mb-4 mb-md-0">
                                    <a href="http://qnbt.zlovey.cn/" target="_blank" class="social-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
                                            <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.267 9.267 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
                                        </svg>
                                    </a>
                                    <p class="mt-2 mb-0">官方网站</p>
                                </div>
                                <div class="col-md-3 mb-4 mb-md-0">
                                    <a href="https://gitee.com/zhuxiaohuaqn/qnbt/issues" target="_blank" class="social-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bug" viewBox="0 0 16 16">
                                            <path d="M4.355.522a.5.5 0 0 1 .623.333l.291.956.807-.272a.5.5 0 0 1 .578.194l.8 1.2a.5.5 0 0 1-.215.696l-.718.317.55.894a.5.5 0 0 1-.26.79l-.824.206.637.77a.5.5 0 0 0-.298.846l.85.18a.5.5 0 0 0 .448-.2l.79-.845.943.467a.5.5 0 0 0 .61.18l.226-.44v.619a.5.5 0 0 1-.646.473l-.733-.214-.355.863a.5.5 0 0 0-.461.31h-.28a.5.5 0 0 0-.46-.31l-.355-.863-.733.214a.5.5 0 0 0-.647-.473v-.619l.226.44a.5.5 0 0 0-.61.18l.943-.467.79.845a.5.5 0 0 0 .448.2l.85-.18a.5.5 0 0 0 .298-.846l-.637-.77.824-.206a.5.5 0 0 0-.26-.79l-.55-.894.718-.317a.5.5 0 0 0-.215-.696l-.8-1.2a.5.5 0 0 0-.578-.194l-.807.272-.291-.955a.5.5 0 0 0-.623-.334l-.643.267.643-.267zm2.89 1.248a.5.5 0 0 0-.275.746L7.5 4l-.525-1.98a.5.5 0 0 0-.95 0L5.5 4l-.525-1.98a.5.5 0 0 0-.275-.746.5.5 0 0 0-.623.334l-.291.955-.807-.272a.5.5 0 0 0-.578.194l-.8 1.2a.5.5 0 0 0 .215.696l.718.317-.55.894a.5.5 0 0 0 .26.79l.824.206-.637.77a.5.5 0 0 0 .298.846l.85.18a.5.5 0 0 0 .448-.2l.79-.845.943.467a.5.5 0 0 0 .61.18l.226-.44v.619a.5.5 0 0 0 .646.473l.733-.214.355.863a.5.5 0 0 0 .461.31h.28a.5.5 0 0 0 .46-.31l.355-.863.733.214a.5.5 0 0 0 .647-.473v-.619l.226.44a.5.5 0 0 0 .61.18l.943-.467.79.845a.5.5 0 0 0 .448.2l.85-.18a.5.5 0 0 0 .298-.846l-.637-.77.824-.206a.5.5 0 0 0 .26-.79l-.55-.894.718-.317a.5.5 0 0 0-.215-.696l-.8-1.2a.5.5 0 0 0-.578-.194l-.807.272-.291-.955a.5.5 0 0 0-.623-.334l-.643.267z"/>
                                        </svg>
                                    </a>
                                    <p class="mt-2 mb-0">问题反馈</p>
                                </div>
                                <div class="col-md-3 mb-4 mb-md-0">
                                    <a href="https://www.qingningz.cn/" target="_blank" class="social-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-book" viewBox="0 0 16 16">
                                            <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
                                        </svg>
                                    </a>
                                    <p class="mt-2 mb-0">技术博客</p>
                                </div>
                                <div class="col-md-3">
                                    <a href="javascript:void(0)" class="social-icon" onclick="showQQGroup()">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-qq" viewBox="0 0 16 16">
                                            <path d="M7.5 0C3.5 0 0 2.4 0 6c0 1.4.6 2.7 1.5 3.7-.2.4-.3.9-.3 1.4 0 2 2.2 3.3 5.6 3.7l.4.9c.2.2.4.4.8.4.3 0 .6-.1.8-.4l.4-.9c3.4-.4 5.6-1.7 5.6-3.7 0-3.6-3.5-6-7.5-6zm6 7.5H12c-.3 0-.5.2-.5.5s.2.5.5.5h1.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5zm-4.5 3c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm-6 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm-1.5-4.5H3c-.3 0-.5.2-.5.5s.2.5.5.5h1.5c.3 0 .5-.2.5-.5s-.2-.5-.5-.5z"/>
                                        </svg>
                                    </a>
                                    <p class="mt-2 mb-0">QQ群</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">QnBt 宝塔主机面板</h5>
                    <p>现代化的宝塔虚拟主机管理面板，基于宝塔控制面板 API 二次开发，提供简洁高效的虚拟主机管理解决方案。</p>
                </div>
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <h5 class="text-uppercase mb-4">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#">首页</a></li>
                        <li class="mb-2"><a href="#features">功能特性</a></li>
                        <li class="mb-2"><a href="#screenshot">界面预览</a></li>
                        <li class="mb-2"><a href="#download">下载</a></li>
                        <li class="mb-2"><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <h5 class="text-uppercase mb-4">开源许可</h5>
                    <p>QnBt 是开源软件，采用 MIT 许可证发布。</p>
                    <p>项目托管在 <a href="https://gitee.com/zhuxiaohuaqn/qnbt" target="_blank">Gitee</a></p>
                </div>
            </div>
            <div class="copyright text-center">
                <p>&copy; 2025 QnBt. 保留所有权利。由 <a href="https://www.qingningz.cn/" target="_blank">青柠博客</a> 开发维护。</p>
            </div>
        </div>
    </footer>

    <!-- QQ群二维码模态框 -->
    <div class="modal fade" id="qqGroupModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">加入QQ群</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p>扫描二维码加入我们的QQ群</p>
                    <img src="https://wmimg.com/i/113/2025/09/68b91f12c4461.png" alt="QQ群二维码" class="img-fluid rounded" style="max-width: 200px;">
                    <p class="mt-3 mb-0">群号：853985196</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义脚本 -->
    <script>
        function showQQGroup() {
            var modal = new bootstrap.Modal(document.getElementById('qqGroupModal'));
            modal.show();
        }
    </script>
</body>
</html>